<!DOCTYPE html>

<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>孕育宝典 - 首页</title>

    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <style>
      body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;

        background-color: #f5f5f5;

        color: #333333;

        margin: 0;

        padding: 0;
      }

      .device-container {
        width: 390px;

        height: 844px;

        overflow: hidden;

        position: relative;

        background-color: white;
      }

      .status-bar {
        height: 44px;

        background-color: #ffffff;

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 0 20px;

        font-size: 14px;

        font-weight: 600;
      }

      .nav-bar {
        height: 60px;

        background-color: #ffffff;

        position: absolute;

        bottom: 0;

        width: 100%;

        display: flex;

        justify-content: space-around;

        align-items: center;

        border-top: 1px solid #f5f5f5;
      }

      .nav-item {
        display: flex;

        flex-direction: column;

        align-items: center;

        color: #666666;

        font-size: 10px;
      }

      .nav-item.active {
        color: #ff9fb5;
      }

      .main-content {
        height: calc(844px - 44px - 60px);

        overflow-y: auto;

        background-color: #f5f5f5;
      }

      .notification-dot {
        width: 8px;

        height: 8px;

        background-color: #ff6b8b;

        border-radius: 50%;

        position: absolute;

        top: 0;

        right: 0;
      }

      .status-switch {
        background-color: #ffffff;

        border-radius: 16px;

        padding: 4px;

        display: flex;

        justify-content: space-between;

        margin: 15px;
      }

      .status-btn {
        padding: 8px 16px;

        border-radius: 12px;

        font-size: 14px;

        font-weight: 500;

        text-align: center;

        flex: 1;

        cursor: pointer;

        transition: all 0.3s ease;
      }

      .status-btn.active {
        background-color: #ff9fb5;

        color: white;
      }

      /* 共用样式 */

      .section-title {
        font-size: 16px;

        font-weight: 600;

        margin: 16px 16px 12px;

        color: #333;
      }

      .feature-card {
        background-color: white;

        border-radius: 16px;

        padding: 16px;

        margin-bottom: 12px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      .feature-grid {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 12px;

        margin-top: 12px;
      }

      .feature-item {
        display: flex;

        flex-direction: column;

        align-items: center;

        padding: 12px 8px;

        background-color: #fff8f9;

        border-radius: 12px;

        cursor: pointer;
      }

      .feature-icon {
        width: 40px;

        height: 40px;

        border-radius: 50%;

        background-color: #ffd6e0;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-bottom: 8px;

        color: #ff6b8b;
      }

      .article-card {
        display: flex;

        background-color: white;

        border-radius: 12px;

        overflow: hidden;

        margin-bottom: 12px;

        cursor: pointer;
      }

      .article-img {
        width: 100px;

        height: 100px;

        object-fit: cover;
      }

      .article-content {
        padding: 12px;

        flex: 1;
      }

      .article-tag {
        display: inline-block;

        padding: 2px 8px;

        background-color: #ffd6e0;

        color: #ff6b8b;

        border-radius: 4px;

        font-size: 10px;

        margin-bottom: 6px;
      }

      /* 备孕状态特定样式 */

      .preparing-content {
        display: none;
      }

      .user-status {
        display: flex;

        align-items: center;

        background-color: #ffffff;

        border-radius: 16px;

        padding: 16px;

        margin: 15px 15px 0;
      }

      .user-avatar {
        width: 50px;

        height: 50px;

        border-radius: 50%;

        object-fit: cover;

        margin-right: 12px;

        border: 2px solid #ffd6e0;
      }

      .cycle-info {
        margin-top: 8px;

        padding: 6px 12px;

        background-color: #fff8f9;

        border-radius: 8px;

        font-size: 12px;

        color: #ff6b8b;
      }

      /* 孕期状态特定样式 */

      .pregnant-content {
        display: none;
      }

      .header {
        background-color: #ff9fb5;

        padding: 20px 16px;

        color: white;
      }

      .pregnancy-banner {
        display: flex;

        flex-direction: column;

        margin-bottom: 20px;
      }

      .banner-title {
        display: flex;

        align-items: center;

        font-weight: 600;

        font-size: 16px;

        margin-bottom: 12px;
      }

      .banner-title i {
        margin-right: 8px;
      }

      .day-count {
        font-size: 32px;

        font-weight: 700;

        margin-right: 8px;
      }

      .progress-container {
        background-color: rgba(255, 255, 255, 0.3);

        border-radius: 12px;

        height: 8px;

        margin: 8px 0;

        overflow: hidden;
      }

      .progress-bar {
        background-color: white;

        height: 100%;

        border-radius: 12px;
      }

      .fetus-stage {
        display: flex;

        align-items: center;

        margin-top: 8px;

        gap: 10px;
      }

      .fetus-icon {
        width: 50px;

        height: 50px;

        background-color: white;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 24px;

        color: #ff9fb5;
      }

      .fetus-info {
        flex: 1;
      }

      .fetus-size {
        font-size: 12px;

        color: rgba(255, 255, 255, 0.8);

        margin-top: 4px;
      }

      .function-cards {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        padding: 0 16px;
      }

      .function-card {
        background-color: #ffffff;

        border-radius: 12px;

        overflow: hidden;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

        padding: 16px;

        display: flex;

        flex-direction: column;

        height: 120px;

        cursor: pointer;
      }

      .card-header {
        display: flex;

        justify-content: space-between;

        align-items: flex-start;

        margin-bottom: 10px;
      }

      .card-title {
        font-size: 14px;

        font-weight: 500;

        color: #333;
      }

      .card-icon {
        width: 36px;

        height: 36px;

        border-radius: 8px;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 18px;

        color: white;
      }

      .card-content {
        flex: 1;

        display: flex;

        flex-direction: column;

        justify-content: center;
      }

      .card-value {
        font-size: 20px;

        font-weight: 600;

        color: #333;

        margin-bottom: 4px;
      }

      .card-description {
        font-size: 12px;

        color: #999;
      }

      .today-tips {
        background-color: #fff;

        border-radius: 12px;

        margin: 16px;

        padding: 16px;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      }

      .tips-header {
        display: flex;

        align-items: center;

        margin-bottom: 10px;
      }

      .tips-title {
        font-size: 15px;

        font-weight: 500;

        color: #333;

        margin-left: 8px;
      }

      .tips-icon {
        color: #ff9fb5;

        font-size: 18px;
      }

      .tips-content {
        font-size: 13px;

        color: #666;

        line-height: 1.5;
      }

      .checkup-card {
        background-color: #fff;

        border-radius: 12px;

        margin: 16px;

        padding: 16px;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      }

      .checkup-header {
        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 12px;
      }

      .checkup-title {
        font-size: 15px;

        font-weight: 500;

        color: #333;

        display: flex;

        align-items: center;
      }

      .checkup-title i {
        color: #ff9fb5;

        font-size: 18px;

        margin-right: 8px;
      }

      .checkup-more {
        font-size: 12px;

        color: #999;
      }

      .checkup-content {
        display: flex;

        align-items: center;

        background-color: #ffeaef;

        border-radius: 10px;

        padding: 12px;
      }

      .checkup-date {
        width: 50px;

        height: 50px;

        background-color: #ff9fb5;

        border-radius: 10px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        color: white;

        margin-right: 12px;
      }

      .checkup-day {
        font-size: 20px;

        font-weight: 600;

        line-height: 1;
      }

      .checkup-month {
        font-size: 12px;

        margin-top: 4px;
      }

      .checkup-info {
        flex: 1;
      }

      .checkup-name {
        font-size: 14px;

        font-weight: 500;

        margin-bottom: 4px;
      }

      .checkup-time {
        font-size: 12px;

        color: #666;
      }

      .today-todo {
        background-color: #fff;

        border-radius: 12px;

        margin: 16px;

        padding: 16px;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      }

      .todo-header {
        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 10px;
      }

      .todo-title {
        font-size: 15px;

        font-weight: 500;

        color: #333;

        display: flex;

        align-items: center;
      }

      .todo-title i {
        color: #ff9fb5;

        font-size: 18px;

        margin-right: 8px;
      }

      .todo-more {
        font-size: 12px;

        color: #999;
      }

      .todo-item {
        display: flex;

        align-items: center;

        padding: 10px 0;

        border-bottom: 1px solid #f5f5f5;
      }

      .todo-item:last-child {
        border-bottom: none;

        padding-bottom: 0;
      }

      .todo-checkbox {
        width: 18px;

        height: 18px;

        border-radius: 50%;

        border: 1px solid #ff9fb5;

        margin-right: 10px;

        display: flex;

        justify-content: center;

        align-items: center;

        color: white;

        font-size: 10px;
      }

      .todo-checkbox.checked {
        background-color: #ff9fb5;
      }

      .todo-content {
        flex: 1;

        font-size: 13px;
      }

      .todo-time {
        font-size: 12px;

        color: #999;
      }

      .bg-pink {
        background-color: #ff9fb5;
      }

      .bg-blue {
        background-color: #64b5f6;
      }

      .bg-purple {
        background-color: #ba68c8;
      }

      .bg-orange {
        background-color: #ffa726;
      }

      /* 产后状态特定样式 */

      .postpartum-content {
        display: none;
      }

      .baby-status {
        background-color: #fff4f8;

        border-radius: 16px;

        padding: 20px;

        margin: 15px 15px 20px;

        position: relative;
      }

      .baby-info {
        display: flex;

        align-items: center;

        margin-bottom: 15px;
      }

      .baby-avatar {
        width: 60px;

        height: 60px;

        border-radius: 50%;

        object-fit: cover;

        margin-right: 15px;

        border: 3px solid #fff;

        box-shadow: 0 2px 8px rgba(255, 159, 181, 0.3);
      }

      .baby-name {
        font-size: 18px;

        font-weight: 600;

        margin-bottom: 2px;
      }

      .baby-age {
        color: #ff7b9c;

        font-size: 13px;
      }

      .milestone-title {
        font-size: 14px;

        color: #666;

        margin-bottom: 8px;
      }

      .milestone-progress {
        background-color: #fff;

        height: 8px;

        border-radius: 4px;

        margin-bottom: 8px;

        overflow: hidden;
      }

      .milestone-bar {
        height: 100%;

        background-color: #ff9fb5;

        border-radius: 4px;
      }

      .milestone-labels {
        display: flex;

        justify-content: space-between;

        font-size: 10px;

        color: #888;
      }

      .recovery-card {
        background-color: #fff;

        border-radius: 16px;

        padding: 16px;

        margin: 0 15px 15px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      .recovery-title {
        font-size: 16px;

        font-weight: 600;

        margin-bottom: 12px;

        display: flex;

        align-items: center;
      }

      .recovery-title i {
        color: #ff9fb5;

        margin-right: 8px;
      }

      .recovery-item {
        display: flex;

        justify-content: space-between;

        margin-bottom: 14px;

        align-items: center;
      }

      .recovery-item:last-child {
        margin-bottom: 0;
      }

      .recovery-label {
        display: flex;

        align-items: center;

        font-size: 14px;
      }

      .recovery-icon {
        width: 32px;

        height: 32px;

        border-radius: 8px;

        background-color: #ffeaef;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-right: 10px;

        color: #ff7b9c;
      }

      .recovery-value {
        font-size: 16px;

        font-weight: 500;

        color: #333;
      }

      .recovery-value .unit {
        font-size: 12px;

        color: #999;

        margin-left: 2px;
      }

      .baby-growth {
        background-color: #fff;

        border-radius: 16px;

        padding: 16px;

        margin: 0 15px 15px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      .growth-header {
        display: flex;

        justify-content: space-between;

        margin-bottom: 12px;
      }

      .growth-title {
        font-size: 16px;

        font-weight: 600;

        display: flex;

        align-items: center;
      }

      .growth-title i {
        color: #ff9fb5;

        margin-right: 8px;
      }

      .growth-nav {
        display: flex;

        gap: 2px;
      }

      .growth-nav-btn {
        padding: 4px 10px;

        border-radius: 12px;

        font-size: 12px;

        background-color: #f5f5f5;

        color: #666;
      }

      .growth-nav-btn.active {
        background-color: #ff9fb5;

        color: white;
      }

      .growth-data {
        display: flex;

        justify-content: space-around;

        text-align: center;

        margin-top: 10px;
      }

      .growth-item {
        display: flex;

        flex-direction: column;

        align-items: center;
      }

      .growth-value {
        font-size: 20px;

        font-weight: 600;

        color: #333;

        margin-bottom: 2px;
      }

      .growth-label {
        font-size: 12px;

        color: #999;
      }

      .growth-chart {
        height: 120px;

        width: 100%;

        margin-top: 10px;

        position: relative;
      }

      .chart-placeholder {
        background-color: #f9f9f9;

        height: 100%;

        border-radius: 8px;

        display: flex;

        justify-content: center;

        align-items: center;

        color: #888;

        font-size: 12px;
      }

      /* 内容切换动画 */

      .fade-enter {
        opacity: 0;

        transform: translateY(10px);
      }

      .fade-enter-active {
        opacity: 1;

        transform: translateY(0);

        transition: opacity 0.3s, transform 0.3s;
      }

      /* 统一设计系统样式 */

      /* 卡片统一样式 */

      .unified-card {
        background-color: white;

        border-radius: 16px;

        padding: 18px;

        margin: 15px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      /* 用户信息卡片统一样式 */

      .user-card {
        background-color: white;

        border-radius: 16px;

        padding: 18px;

        margin: 15px 15px 12px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }

      .user-info {
        display: flex;

        align-items: center;

        margin-bottom: 12px;
      }

      .user-avatar,
      .baby-avatar {
        width: 50px;

        height: 50px;

        border-radius: 50%;

        object-fit: cover;

        margin-right: 12px;

        border: 2px solid #ffd6e0;
      }

      .user-name {
        font-size: 16px;

        font-weight: 600;

        color: #333;

        margin-bottom: 2px;
      }

      .user-status {
        font-size: 12px;

        color: #666;
      }

      /* 进度条统一样式 */

      .progress-container {
        background-color: #f5f5f5;

        border-radius: 10px;

        height: 8px;

        overflow: hidden;

        margin: 8px 0;
      }

      .progress-bar {
        background-color: #ff9fb5;

        height: 100%;

        border-radius: 10px;
      }

      /* 健康指导部分统一样式 */

      .health-guidance-section {
        margin: 0 15px 15px;
      }

      .section-title {
        font-size: 17px;

        font-weight: 600;

        margin-bottom: 12px;

        color: #333;

        display: flex;

        align-items: center;
      }

      .section-title i {
        color: #ff9fb5;

        margin-right: 8px;
      }

      .guidance-cards {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
      }

      .guidance-card {
        background-color: white;

        border-radius: 12px;

        padding: 15px;

        display: flex;

        flex-direction: column;

        align-items: center;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

        cursor: pointer;

        transition: transform 0.2s, box-shadow 0.2s;
      }

      .guidance-card:hover {
        transform: translateY(-2px);

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      }

      .guidance-icon {
        width: 45px;

        height: 45px;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-bottom: 8px;

        color: white;

        font-size: 20px;
      }

      .guidance-title {
        font-size: 14px;

        font-weight: 600;

        margin-bottom: 4px;

        color: #333;
      }

      .guidance-desc {
        font-size: 12px;

        color: #888;

        text-align: center;
      }

      /* 核心功能区统一样式 */

      .core-functions {
        margin: 0 15px 15px;
      }

      .function-grid {
        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 15px;

        background-color: white;

        border-radius: 12px;

        padding: 15px;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      }

      .function-item {
        display: flex;

        flex-direction: column;

        align-items: center;

        cursor: pointer;
      }

      .function-icon {
        width: 45px;

        height: 45px;

        border-radius: 12px;

        background-color: #fff0f4;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-bottom: 6px;

        color: #ff7b9c;

        font-size: 20px;

        transition: transform 0.2s;
      }

      .function-item:hover .function-icon {
        transform: scale(1.05);
      }

      .function-name {
        font-size: 12px;

        color: #555;

        text-align: center;
      }

      /* 内容卡片统一样式 */

      .content-card {
        background-color: white;

        border-radius: 12px;

        padding: 15px;

        margin: 0 15px 15px;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      }

      .card-header {
        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 12px;
      }

      .card-title {
        font-size: 16px;

        font-weight: 600;

        color: #333;

        display: flex;

        align-items: center;
      }

      .card-title i {
        color: #ff9fb5;

        margin-right: 8px;
      }

      .card-more {
        font-size: 12px;

        color: #999;

        display: flex;

        align-items: center;
      }

      .card-more i {
        font-size: 10px;

        margin-left: 3px;
      }

      /* 文章推荐统一样式 */

      .article-list {
        display: flex;

        flex-direction: column;

        gap: 12px;
      }

      .article-item {
        display: flex;

        gap: 12px;

        cursor: pointer;
      }

      .article-image {
        width: 80px;

        height: 80px;

        border-radius: 8px;

        object-fit: cover;

        flex-shrink: 0;
      }

      .article-content {
        display: flex;

        flex-direction: column;

        justify-content: space-between;

        flex: 1;
      }

      .article-title {
        font-size: 14px;

        font-weight: 500;

        color: #333;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        line-height: 1.4;
      }

      .article-meta {
        display: flex;

        justify-content: space-between;

        align-items: center;
      }

      .article-tag {
        background-color: #fff0f4;

        color: #ff7b9c;

        font-size: 10px;

        padding: 2px 6px;

        border-radius: 4px;
      }

      .article-views {
        font-size: 10px;

        color: #999;
      }

      /* 背景色统一 */

      .bg-green {
        background-color: #81c784;
      }

      .bg-blue {
        background-color: #64b5f6;
      }

      .bg-purple {
        background-color: #ba68c8;
      }

      .bg-orange {
        background-color: #ffa726;
      }

      .bg-red {
        background-color: #e57373;
      }

      .bg-teal {
        background-color: #4db6ac;
      }

      /* 数据条目统一样式 */

      .data-item {
        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 10px 0;

        border-bottom: 1px solid #f5f5f5;
      }

      .data-item:last-child {
        border-bottom: none;
      }

      .data-label {
        display: flex;

        align-items: center;

        gap: 10px;

        font-size: 14px;

        color: #555;
      }

      .data-icon {
        width: 36px;

        height: 36px;

        border-radius: 8px;

        background-color: #f5f5f5;

        display: flex;

        justify-content: center;

        align-items: center;

        color: #888;
      }

      .data-value {
        font-size: 15px;

        font-weight: 600;

        color: #333;
      }

      .data-unit {
        font-size: 12px;

        color: #888;

        margin-left: 2px;
      }

      /* 状态指示器样式 */

      .status-indicator {
        background-color: #ffffff;

        border-radius: 20px;

        padding: 6px 12px;

        margin: 15px;

        display: inline-flex;

        align-items: center;

        font-size: 14px;

        font-weight: 500;

        color: #333;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

        cursor: pointer;

        transition: all 0.2s;
      }

      .status-indicator:hover {
        background-color: #fff8f9;
      }

      .status-indicator i {
        color: #ff9fb5;

        margin-left: 6px;

        font-size: 10px;
      }

      /* 状态切换弹窗样式 */

      .status-modal {
        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        z-index: 100;

        display: none;
      }

      .status-modal.active {
        display: block;
      }

      .modal-overlay {
        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.5);

        animation: fadeIn 0.2s ease-out;
      }

      .modal-container {
        position: absolute;

        bottom: 0;

        left: 0;

        width: 100%;

        background-color: white;

        border-radius: 20px 20px 0 0;

        padding: 20px;

        animation: slideUp 0.3s ease-out;

        transform: translateY(0);
      }

      .modal-header {
        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 20px;
      }

      .modal-header h3 {
        font-size: 18px;

        font-weight: 600;

        color: #333;
      }

      .close-btn {
        width: 32px;

        height: 32px;

        border-radius: 50%;

        border: none;

        background-color: #f5f5f5;

        color: #666;

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

        transition: all 0.2s;
      }

      .close-btn:hover {
        background-color: #e0e0e0;
      }

      .modal-content {
        margin-bottom: 20px;
      }

      .status-option {
        display: flex;

        align-items: center;

        padding: 15px;

        border-radius: 12px;

        margin-bottom: 10px;

        background-color: #f9f9f9;

        cursor: pointer;

        transition: all 0.2s;
      }

      .status-option:hover {
        background-color: #fff0f4;
      }

      .status-option.selected {
        background-color: #fff0f4;

        border: 1px solid #ffb0c1;
      }

      .option-icon {
        width: 40px;

        height: 40px;

        border-radius: 50%;

        background-color: #ffd6e0;

        color: #ff7b9c;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 18px;

        margin-right: 12px;
      }

      .option-content {
        flex: 1;
      }

      .option-title {
        font-size: 16px;

        font-weight: 500;

        margin-bottom: 4px;
      }

      .option-desc {
        font-size: 12px;

        color: #777;
      }

      .option-check {
        width: 24px;

        height: 24px;

        color: #ff9fb5;

        font-size: 24px;

        opacity: 0;

        transition: opacity 0.2s;
      }

      .status-option.selected .option-check {
        opacity: 1;
      }

      .modal-footer {
        border-top: 1px solid #f0f0f0;

        padding-top: 15px;

        text-align: center;
      }

      .confirmation-message {
        font-size: 14px;

        color: #666;

        margin-bottom: 15px;
      }

      .confirmation-buttons {
        display: flex;

        gap: 10px;
      }

      .btn-cancel,
      .btn-confirm {
        flex: 1;

        padding: 12px 0;

        border-radius: 10px;

        font-size: 15px;

        font-weight: 500;

        cursor: pointer;

        transition: all 0.2s;

        border: none;
      }

      .btn-cancel {
        background-color: #f5f5f5;

        color: #666;
      }

      .btn-cancel:hover {
        background-color: #e0e0e0;
      }

      .btn-confirm {
        background-color: #ff9fb5;

        color: white;
      }

      .btn-confirm:hover {
        background-color: #ff89a3;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

      @keyframes slideUp {
        from {
          transform: translateY(100%);
        }

        to {
          transform: translateY(0);
        }
      }

      /* 底部导航栏样式 */

      .bottom-nav {
        height: 60px;

        background-color: #ffffff;

        position: absolute;

        bottom: 0;

        width: 100%;

        display: flex;

        justify-content: space-around;

        align-items: center;

        border-top: 1px solid #f0f0f0;
      }

      .nav-item {
        display: flex;

        flex-direction: column;

        align-items: center;

        color: #666666;

        font-size: 10px;
      }

      .nav-item.active {
        color: #ff9fb5;
      }
    </style>
  </head>

  <body>
    <div class="device-container">
      <!-- iOS状态栏 -->

      <div class="status-bar">
        <span>9:41</span>

        <div class="flex items-center">
          <i class="fas fa-signal mr-1"></i>

          <i class="fas fa-wifi mr-1"></i>

          <i class="fas fa-battery-full"></i>
        </div>
      </div>

      <!-- 主内容区 -->

      <div class="main-content">
        <!-- 状态切换 -->

        <div class="status-indicator" id="statusToggleBtn">
          <span id="currentStatusText">备孕期</span>

          <i class="fas fa-chevron-down text-xs ml-1"></i>
        </div>

        <!-- 状态切换弹窗 -->

        <div class="status-modal" id="statusModal">
          <div class="modal-overlay"></div>

          <div class="modal-container">
            <div class="modal-header">
              <h3>选择您的状态</h3>

              <button class="close-btn" id="closeModalBtn">
                <i class="fas fa-times"></i>
              </button>
            </div>

            <div class="modal-content">
              <div class="status-option" data-status="preparing">
                <div class="option-icon"><i class="fas fa-heart"></i></div>

                <div class="option-content">
                  <div class="option-title">备孕阶段</div>

                  <div class="option-desc">经期追踪、排卵预测</div>
                </div>

                <div class="option-check">
                  <i class="fas fa-check-circle"></i>
                </div>
              </div>

              <div class="status-option" data-status="pregnant">
                <div class="option-icon"><i class="fas fa-baby"></i></div>

                <div class="option-content">
                  <div class="option-title">孕期阶段</div>

                  <div class="option-desc">胎儿发育、产检管理</div>
                </div>

                <div class="option-check">
                  <i class="fas fa-check-circle"></i>
                </div>
              </div>

              <div class="status-option" data-status="postpartum">
                <div class="option-icon">
                  <i class="fas fa-baby-carriage"></i>
                </div>

                <div class="option-content">
                  <div class="option-title">产后阶段</div>

                  <div class="option-desc">产后恢复、婴儿成长</div>
                </div>

                <div class="option-check">
                  <i class="fas fa-check-circle"></i>
                </div>
              </div>
            </div>

            <div class="modal-footer" id="confirmationArea">
              <p class="confirmation-message">确定要切换到新状态吗？</p>

              <div class="confirmation-buttons">
                <button class="btn-cancel" id="cancelBtn">取消</button>

                <button class="btn-confirm" id="confirmBtn">确认</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 备孕状态内容 -->

        <div id="preparing-content" class="preparing-content">
          <!-- 用户信息卡片 -->

          <div class="user-card">
            <div class="user-info">
              <img
                src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1061&q=80"
                alt="用户头像"
                class="user-avatar"
              />

              <div>
                <div class="user-name">刘小红，你好！</div>

                <div class="user-status">备孕期 · 第3个月</div>
              </div>
            </div>

            <div class="cycle-tracking">
              <div class="flex justify-between items-center mb-1">
                <div class="text-sm font-medium text-gray-700">
                  月经周期追踪
                </div>

                <div class="text-xs text-pink-500">
                  <i class="fas fa-calendar-alt mr-1"></i>

                  距离下次经期还有 <span class="font-semibold">7天</span>
                </div>
              </div>

              <div class="progress-container">
                <div class="progress-bar" style="width: 75%"></div>
              </div>

              <div class="flex justify-between text-xs text-gray-500 mt-1">
                <span>上次经期：10月11日</span>

                <span>预计下次：11月8日</span>
              </div>
            </div>
          </div>

          <!-- 健康行为与饮食指导 -->

          <div class="health-guidance-section">
            <h2 class="section-title">
              <i class="fas fa-heartbeat"></i>健康指导
            </h2>

            <div class="guidance-cards">
              <div class="guidance-card">
                <div class="guidance-icon bg-green">
                  <i class="fas fa-utensils"></i>
                </div>

                <div class="guidance-title">备孕饮食指导</div>

                <div class="guidance-desc">增加叶酸摄入，提高受孕率</div>
              </div>

              <div class="guidance-card">
                <div class="guidance-icon bg-blue">
                  <i class="fas fa-running"></i>
                </div>

                <div class="guidance-title">备孕行为建议</div>

                <div class="guidance-desc">适量运动，避免熬夜</div>
              </div>
            </div>
          </div>

          <!-- 备孕核心功能 -->

          <div class="core-functions">
            <h2 class="section-title"><i class="fas fa-magic"></i>备孕助手</h2>

            <div class="function-grid">
              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-calendar-alt"></i>
                </div>

                <div class="function-name">经期日历</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-venus"></i>
                </div>

                <div class="function-name">排卵预测</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-temperature-high"></i>
                </div>

                <div class="function-name">基础体温</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-file-medical-alt"></i>
                </div>

                <div class="function-name">症状记录</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-tint"></i>
                </div>

                <div class="function-name">白带检测</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-chart-line"></i>
                </div>

                <div class="function-name">数据分析</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-clipboard-check"></i>
                </div>

                <div class="function-name">备孕检查</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-pills"></i>
                </div>

                <div class="function-name">营养补充</div>
              </div>
            </div>
          </div>

          <!-- 备孕每日任务 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-tasks"></i>每日健康任务
              </div>

              <div class="card-more">
                查看全部<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="space-y-3">
              <div class="flex items-center">
                <div
                  class="w-6 h-6 rounded-full border border-pink-400 flex items-center justify-center mr-3 text-pink-400"
                >
                  <i class="fas fa-check text-xs"></i>
                </div>

                <div class="flex-1">
                  <div class="flex justify-between">
                    <div class="text-sm">记录基础体温</div>

                    <div class="text-xs text-gray-400">已完成</div>
                  </div>
                </div>
              </div>

              <div class="flex items-center">
                <div
                  class="w-6 h-6 rounded-full border border-pink-400 mr-3"
                ></div>

                <div class="flex-1">
                  <div class="flex justify-between">
                    <div class="text-sm">服用叶酸片</div>

                    <div class="text-xs text-gray-400">今天</div>
                  </div>
                </div>
              </div>

              <div class="flex items-center">
                <div
                  class="w-6 h-6 rounded-full border border-pink-400 mr-3"
                ></div>

                <div class="flex-1">
                  <div class="flex justify-between">
                    <div class="text-sm">进行20分钟有氧运动</div>

                    <div class="text-xs text-gray-400">今天</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 备孕知识推荐 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-lightbulb"></i>备孕知识推荐
              </div>

              <div class="card-more">
                更多<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="article-list">
              <div class="article-item">
                <img
                  src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
                  class="article-image"
                  alt="文章图片"
                />

                <div class="article-content">
                  <div class="article-title">
                    提高受孕几率的七个科学方法，第四个最容易被忽略
                  </div>

                  <div class="article-meta">
                    <div class="article-tag">备孕锦囊</div>

                    <div class="article-views">1.2万阅读</div>
                  </div>
                </div>
              </div>

              <div class="article-item">
                <img
                  src="https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1854&q=80"
                  class="article-image"
                  alt="文章图片"
                />

                <div class="article-content">
                  <div class="article-title">
                    备孕期间的营养补充指南，专家建议这样吃
                  </div>

                  <div class="article-meta">
                    <div class="article-tag">饮食指南</div>

                    <div class="article-views">8563阅读</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 孕期状态内容 -->

        <div id="pregnant-content" class="pregnant-content">
          <!-- 用户信息卡片 - 孕期版 -->

          <div class="user-card pregnant-card">
            <div class="user-info">
              <img
                src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1061&q=80"
                alt="用户头像"
                class="user-avatar"
              />

              <div>
                <div class="user-name">刘小红，你好！</div>

                <div class="user-status">孕期 · 20周+3天</div>
              </div>
            </div>

            <div class="pregnancy-info">
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm font-medium text-gray-700"
                  >距离预产期</span
                >

                <span class="text-pink-500 font-bold text-lg"
                  >140<span class="text-sm font-normal">天</span></span
                >
              </div>

              <div class="progress-container">
                <div class="progress-bar" style="width: 50%"></div>
              </div>

              <div class="flex justify-between text-xs text-gray-500 mt-1">
                <span>已孕20周+3天</span>

                <span>预产期：2023年4月15日</span>
              </div>
            </div>
          </div>

          <!-- 胎儿发育状态 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-baby"></i>胎儿发育状态
              </div>

              <div class="card-more">
                详情<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="flex gap-3">
              <div
                class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center"
              >
                <i class="fas fa-baby text-2xl text-pink-500"></i>
              </div>

              <div class="flex-1">
                <div class="text-sm font-medium">本周胎儿大小：香蕉</div>

                <div class="text-xs text-gray-500 mb-1">约25.6厘米，300克</div>

                <div class="text-xs">
                  宝宝的听力继续发育，能听到妈妈的心跳和声音。皮下脂肪开始积累，关节也更加灵活。
                </div>
              </div>
            </div>
          </div>

          <!-- 健康行为与饮食指导 -->

          <div class="health-guidance-section">
            <h2 class="section-title">
              <i class="fas fa-heartbeat"></i>健康指导
            </h2>

            <div class="guidance-cards">
              <div class="guidance-card">
                <div class="guidance-icon bg-green">
                  <i class="fas fa-utensils"></i>
                </div>

                <div class="guidance-title">孕期饮食指导</div>

                <div class="guidance-desc">中期需补充铁质和钙质</div>
              </div>

              <div class="guidance-card">
                <div class="guidance-icon bg-blue">
                  <i class="fas fa-running"></i>
                </div>

                <div class="guidance-title">孕期行为建议</div>

                <div class="guidance-desc">适量孕期瑜伽，促进血液循环</div>
              </div>
            </div>
          </div>

          <!-- 孕期核心功能 -->

          <div class="core-functions">
            <h2 class="section-title"><i class="fas fa-magic"></i>孕期管理</h2>

            <div class="function-grid">
              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-stethoscope"></i>
                </div>

                <div class="function-name">产检管理</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-hand-holding-heart"></i>
                </div>

                <div class="function-name">胎动记录</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-child"></i>
                </div>

                <div class="function-name">胎儿发育</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-weight"></i>
                </div>

                <div class="function-name">体重管理</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-syringe"></i>
                </div>

                <div class="function-name">疫苗接种</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-apple-alt"></i>
                </div>

                <div class="function-name">营养追踪</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-first-aid"></i>
                </div>

                <div class="function-name">待产准备</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-heartbeat"></i>
                </div>

                <div class="function-name">健康监测</div>
              </div>
            </div>
          </div>

          <!-- 孕期需要注意事项 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-exclamation-circle"></i>本周注意事项
              </div>

              <div class="card-more">
                更多<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="space-y-3">
              <div class="flex items-start">
                <div
                  class="w-7 h-7 rounded-full bg-pink-100 flex items-center justify-center mr-3 text-pink-500 mt-0.5"
                >
                  <i class="fas fa-utensils text-sm"></i>
                </div>

                <div class="flex-1">
                  <div class="text-sm font-medium mb-0.5">饮食提醒</div>

                  <div class="text-xs text-gray-600">
                    增加富含铁质的食物摄入，如瘦肉、菠菜、豆类等，预防贫血。
                  </div>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center mr-3 text-blue-500 mt-0.5"
                >
                  <i class="fas fa-ban text-sm"></i>
                </div>

                <div class="flex-1">
                  <div class="text-sm font-medium mb-0.5">行为禁忌</div>

                  <div class="text-xs text-gray-600">
                    避免剧烈运动和重物搬运，注意避免长时间站立，保持左侧卧姿势睡眠。
                  </div>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-7 h-7 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-500 mt-0.5"
                >
                  <i class="fas fa-check text-sm"></i>
                </div>

                <div class="flex-1">
                  <div class="text-sm font-medium mb-0.5">孕期检查</div>

                  <div class="text-xs text-gray-600">
                    本周需进行常规产检，包括胎心监测、宫高测量和血压检查。
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 下一次产检提醒 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-calendar-check"></i>产检提醒
              </div>

              <div class="card-more">
                全部<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="bg-pink-50 rounded-lg p-3 flex items-center">
              <div
                class="w-12 h-12 bg-pink-500 text-white rounded-lg flex flex-col items-center justify-center mr-3"
              >
                <div class="text-xs">11月</div>

                <div class="text-lg font-bold">18</div>
              </div>

              <div class="flex-1">
                <div class="text-sm font-medium mb-0.5">
                  第5次产检 - 系统B超
                </div>

                <div class="text-xs text-gray-600">
                  下周五 09:30 - 市妇幼保健院
                </div>
              </div>

              <div
                class="w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-sm"
              >
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
              </div>
            </div>
          </div>

          <!-- 孕期知识推荐 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-lightbulb"></i>孕期知识
              </div>

              <div class="card-more">
                更多<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="article-list">
              <div class="article-item">
                <img
                  src="https://images.unsplash.com/photo-1519124142585-bc4d4d7dfc51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1854&q=80"
                  class="article-image"
                  alt="文章图片"
                />

                <div class="article-content">
                  <div class="article-title">
                    孕中期睡眠不好？这7个小妙招能帮你安稳度过
                  </div>

                  <div class="article-meta">
                    <div class="article-tag">孕期睡眠</div>

                    <div class="article-views">9823阅读</div>
                  </div>
                </div>
              </div>

              <div class="article-item">
                <img
                  src="https://images.unsplash.com/photo-1535540878297-c83137587839?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1586&q=80"
                  class="article-image"
                  alt="文章图片"
                />

                <div class="article-content">
                  <div class="article-title">
                    20周胎儿发育指南：这个时期孕妈需要特别注意
                  </div>

                  <div class="article-meta">
                    <div class="article-tag">胎儿发育</div>

                    <div class="article-views">1.5万阅读</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 产后状态内容 -->

        <div id="postpartum-content" class="postpartum-content">
          <!-- 用户与宝宝信息卡片 -->

          <div class="user-card postpartum-card">
            <div class="user-info">
              <img
                src="https://images.unsplash.com/photo-1541112324160-e8a425b58dac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGJhYnl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
                alt="宝宝头像"
                class="baby-avatar"
              />

              <div>
                <div class="user-name">小明 · 3个月12天</div>

                <div class="user-status">刘小红，产后3个月</div>
              </div>
            </div>

            <div class="milestone-tracking">
              <div class="flex justify-between items-center mb-1">
                <div class="text-sm font-medium text-gray-700">
                  发育里程碑进度
                </div>
              </div>

              <div class="progress-container">
                <div class="progress-bar" style="width: 25%"></div>
              </div>

              <div class="text-xs text-gray-500 mt-1">
                <span>即将学会：抬头和支撑上身</span>
              </div>
            </div>
          </div>

          <!-- 健康行为与饮食指导 -->

          <div class="health-guidance-section">
            <h2 class="section-title">
              <i class="fas fa-heartbeat"></i>健康指导
            </h2>

            <div class="guidance-cards">
              <div class="guidance-card">
                <div class="guidance-icon bg-green">
                  <i class="fas fa-utensils"></i>
                </div>

                <div class="guidance-title">产后饮食指导</div>

                <div class="guidance-desc">哺乳期营养补充建议</div>
              </div>

              <div class="guidance-card">
                <div class="guidance-icon bg-blue">
                  <i class="fas fa-running"></i>
                </div>

                <div class="guidance-title">产后恢复建议</div>

                <div class="guidance-desc">盆底肌修复与体态调整</div>
              </div>
            </div>
          </div>

          <!-- 产后/宝宝核心功能 -->

          <div class="core-functions">
            <h2 class="section-title"><i class="fas fa-magic"></i>宝宝护理</h2>

            <div class="function-grid">
              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-chart-line"></i>
                </div>

                <div class="function-name">成长曲线</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-utensils"></i>
                </div>

                <div class="function-name">喂养记录</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-baby"></i>
                </div>

                <div class="function-name">发育里程碑</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-hospital-user"></i>
                </div>

                <div class="function-name">新生儿护理</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-heart-broken"></i>
                </div>

                <div class="function-name">产后抑郁预警</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-notes-medical"></i>
                </div>

                <div class="function-name">健康记录</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-spa"></i>
                </div>

                <div class="function-name">产后恢复</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-baby-carriage"></i>
                </div>

                <div class="function-name">婴儿喂养指南</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-moon"></i>
                </div>

                <div class="function-name">睡眠解决</div>
              </div>

              <div class="function-item">
                <div class="function-icon">
                  <i class="fas fa-hands-helping"></i>
                </div>

                <div class="function-name">母婴互动指南</div>
              </div>
            </div>
          </div>

          <!-- 产后恢复数据 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-heart"></i>妈妈恢复状况
              </div>

              <div class="card-more">
                详情<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="space-y-3">
              <div class="data-item">
                <div class="data-label">
                  <div class="data-icon bg-pink-100 text-pink-500">
                    <i class="fas fa-weight"></i>
                  </div>

                  <span>体重恢复</span>
                </div>

                <div class="data-value">
                  -5.2<span class="data-unit">kg</span>
                </div>
              </div>

              <div class="data-item">
                <div class="data-label">
                  <div class="data-icon bg-blue-100 text-blue-500">
                    <i class="fas fa-walking"></i>
                  </div>

                  <span>运动天数</span>
                </div>

                <div class="data-value">
                  18<span class="data-unit">天</span>
                </div>
              </div>

              <div class="data-item">
                <div class="data-label">
                  <div class="data-icon bg-green-100 text-green-500">
                    <i class="fas fa-bed"></i>
                  </div>

                  <span>平均睡眠</span>
                </div>

                <div class="data-value">
                  5.3<span class="data-unit">小时</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 宝宝成长数据 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-child"></i>宝宝成长数据
              </div>

              <div class="card-more">
                查看趋势<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="flex justify-between mb-3">
              <div class="flex flex-1 flex-col items-center">
                <div class="text-xl font-bold text-pink-500">6.1</div>

                <div class="text-xs text-gray-500">体重(kg)</div>
              </div>

              <div class="flex flex-1 flex-col items-center">
                <div class="text-xl font-bold text-blue-500">61.5</div>

                <div class="text-xs text-gray-500">身高(cm)</div>
              </div>

              <div class="flex flex-1 flex-col items-center">
                <div class="text-xl font-bold text-green-500">41.2</div>

                <div class="text-xs text-gray-500">头围(cm)</div>
              </div>
            </div>

            <div
              class="bg-gray-50 h-20 rounded-lg flex items-center justify-center text-xs text-gray-400"
            >
              宝宝生长曲线趋势图
            </div>
          </div>

          <!-- 今日喂养记录 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-baby-carriage"></i>今日喂养记录
              </div>

              <div class="card-more">
                查看全部<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="flex justify-between mb-3">
              <div class="text-sm">
                已记录 <span class="font-semibold text-pink-500">4</span> 次喂养
              </div>

              <div class="text-sm text-gray-500">目标: 8-10次/天</div>
            </div>

            <div class="space-y-3">
              <div class="flex items-center">
                <div
                  class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-3"
                >
                  <i class="fas fa-baby-carriage"></i>
                </div>

                <div class="flex-1">
                  <div class="flex justify-between">
                    <div>
                      <div class="text-sm font-medium">母乳喂养</div>

                      <div class="text-xs text-gray-500">25分钟，左右两侧</div>
                    </div>

                    <div class="text-xs text-gray-400">12:30</div>
                  </div>
                </div>
              </div>

              <div class="flex items-center">
                <div
                  class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3"
                >
                  <i class="fas fa-baby-carriage"></i>
                </div>

                <div class="flex-1">
                  <div class="flex justify-between">
                    <div>
                      <div class="text-sm font-medium">配方奶</div>

                      <div class="text-xs text-gray-500">120ml，完全喝完</div>
                    </div>

                    <div class="text-xs text-gray-400">09:15</div>
                  </div>
                </div>
              </div>
            </div>

            <button
              class="mt-4 w-full py-2 rounded-lg bg-pink-50 text-pink-500 text-sm font-medium"
            >
              <i class="fas fa-plus mr-1"></i> 添加喂养记录
            </button>
          </div>

          <!-- 产后知识推荐 -->

          <div class="content-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-lightbulb"></i>产后与育儿知识
              </div>

              <div class="card-more">
                更多<i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="article-list">
              <div class="article-item">
                <img
                  src="https://images.unsplash.com/photo-1516627145497-ae6968895b24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                  class="article-image"
                  alt="文章图片"
                />

                <div class="article-content">
                  <div class="article-title">
                    3-4个月宝宝的发育关键点，这些能力要重点培养
                  </div>

                  <div class="article-meta">
                    <div class="article-tag">育儿技巧</div>

                    <div class="article-views">1.4万阅读</div>
                  </div>
                </div>
              </div>

              <div class="article-item">
                <img
                  src="https://images.unsplash.com/photo-1561989761-9d3d53754965?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
                  class="article-image"
                  alt="文章图片"
                />

                <div class="article-content">
                  <div class="article-title">
                    产后三个月腹部恢复计划，每天十分钟见效快
                  </div>

                  <div class="article-meta">
                    <div class="article-tag">产后恢复</div>

                    <div class="article-views">8756阅读</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->

      <div class="bottom-nav">
        <div class="nav-item active">
          <i class="fas fa-home text-xl mb-1"></i>

          <span>首页</span>
        </div>

        <div class="nav-item">
          <i class="fas fa-book text-xl mb-1"></i>

          <span>知识库</span>
        </div>

        <div class="nav-item">
          <i class="fas fa-user text-xl mb-1"></i>

          <span>我的</span>
        </div>
      </div>
    </div>

    <script>
      // 当前状态

      let currentStatus = "preparing"; // 默认备孕状态

      let selectedStatus = null; // 弹窗中选中的状态

      // 页面加载时检查本地存储的用户状态

      document.addEventListener("DOMContentLoaded", function () {
        // 初始化弹窗交互

        initStatusModal();

        // 尝试从本地存储获取用户状态

        const savedStatus = localStorage.getItem("userStatus");

        if (
          savedStatus &&
          ["preparing", "pregnant", "postpartum"].includes(savedStatus)
        ) {
          currentStatus = savedStatus;

          updateStatusIndicator(savedStatus);

          showContent(savedStatus);

          // 获取用户详细数据并更新界面

          try {
            const userData = JSON.parse(localStorage.getItem("userData")) || {};

            updatePageWithUserData(userData);
          } catch (e) {
            console.error("无法解析用户数据:", e);
          }
        } else {
          // 如果没有保存状态或状态无效，显示默认状态内容

          updateStatusIndicator(currentStatus);

          showContent(currentStatus);
        }
      });

      // 初始化状态切换弹窗交互

      function initStatusModal() {
        const statusToggleBtn = document.getElementById("statusToggleBtn");

        const statusModal = document.getElementById("statusModal");

        const closeModalBtn = document.getElementById("closeModalBtn");

        const modalOverlay = document.querySelector(".modal-overlay");

        const statusOptions = document.querySelectorAll(".status-option");

        const confirmBtn = document.getElementById("confirmBtn");

        const cancelBtn = document.getElementById("cancelBtn");

        const confirmationArea = document.getElementById("confirmationArea");

        // 初始状态下隐藏确认区域

        confirmationArea.style.display = "none";

        // 点击状态指示器打开弹窗

        statusToggleBtn.addEventListener("click", () => {
          openStatusModal();
        });

        // 点击关闭按钮关闭弹窗

        closeModalBtn.addEventListener("click", () => {
          closeStatusModal();
        });

        // 点击遮罩层关闭弹窗

        modalOverlay.addEventListener("click", (e) => {
          if (e.target === modalOverlay) {
            closeStatusModal();
          }
        });

        // 点击状态选项

        statusOptions.forEach((option) => {
          option.addEventListener("click", () => {
            const status = option.getAttribute("data-status");

            // 高亮选中的选项

            statusOptions.forEach((opt) => opt.classList.remove("selected"));

            option.classList.add("selected");

            // 设置选中的状态

            selectedStatus = status;

            // 如果选中的状态与当前状态不同，显示确认区域

            if (selectedStatus !== currentStatus) {
              confirmationArea.style.display = "block";
            } else {
              confirmationArea.style.display = "none";
            }
          });
        });

        // 点击确认按钮

        confirmBtn.addEventListener("click", () => {
          if (selectedStatus && selectedStatus !== currentStatus) {
            switchStatus(selectedStatus);

            closeStatusModal();
          }
        });

        // 点击取消按钮

        cancelBtn.addEventListener("click", () => {
          closeStatusModal();
        });

        // 初始时在弹窗中标记当前状态

        highlightCurrentStatus();
      }

      // 打开状态切换弹窗

      function openStatusModal() {
        const statusModal = document.getElementById("statusModal");

        statusModal.classList.add("active");

        // 高亮当前状态

        highlightCurrentStatus();

        // 初始时隐藏确认区域

        document.getElementById("confirmationArea").style.display = "none";
      }

      // 关闭状态切换弹窗

      function closeStatusModal() {
        const statusModal = document.getElementById("statusModal");

        statusModal.classList.remove("active");

        // 重置选中状态

        selectedStatus = null;
      }

      // 在弹窗中高亮当前状态

      function highlightCurrentStatus() {
        const statusOptions = document.querySelectorAll(".status-option");

        statusOptions.forEach((option) => {
          const status = option.getAttribute("data-status");

          if (status === currentStatus) {
            option.classList.add("selected");
          } else {
            option.classList.remove("selected");
          }
        });
      }

      // 更新状态指示器显示

      function updateStatusIndicator(status) {
        const statusText = document.getElementById("currentStatusText");

        let statusDisplay = "";

        switch (status) {
          case "preparing":
            statusDisplay = "备孕期";

            break;

          case "pregnant":
            statusDisplay = "孕期";

            break;

          case "postpartum":
            statusDisplay = "产后";

            break;
        }

        statusText.textContent = statusDisplay;
      }

      // 使用用户数据更新界面

      function updatePageWithUserData(userData) {
        if (!userData || !userData.status) return;

        const status = userData.status;

        // 更新备孕状态相关信息

        if (status === "preparing" && userData.lastPeriodDate) {
          // 计算距离下次经期的天数

          const lastPeriodDate = new Date(userData.lastPeriodDate);

          const cycleDays = parseInt(userData.cycleDuration) || 28;

          const nextPeriodDate = new Date(lastPeriodDate);

          nextPeriodDate.setDate(lastPeriodDate.getDate() + cycleDays);

          const today = new Date();

          const daysUntilNextPeriod = Math.round(
            (nextPeriodDate - today) / (1000 * 60 * 60 * 24)
          );

          // 更新界面

          const cycleInfoElement = document.querySelector(
            "#preparing-content .cycle-info"
          );

          if (cycleInfoElement && daysUntilNextPeriod > 0) {
            cycleInfoElement.innerHTML = `







                            <i class="fas fa-calendar-day mr-1"></i>







                            距离下次经期还有 <span class="font-semibold">${daysUntilNextPeriod}天</span>







                        `;
          }
        }

        // 更新孕期状态相关信息
        else if (status === "pregnant" && userData.lastMenstrualPeriod) {
          const lmpDate = new Date(userData.lastMenstrualPeriod);

          const today = new Date();

          // 计算孕周

          const diffTime = Math.abs(today - lmpDate);

          const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

          const weeks = Math.floor(diffDays / 7);

          const days = diffDays % 7;

          // 计算预产期（末次月经日期 + 280天）

          const dueDate = new Date(lmpDate);

          dueDate.setDate(dueDate.getDate() + 280);

          // 计算距离预产期的天数

          const daysToDueDate = Math.round(
            (dueDate - today) / (1000 * 60 * 60 * 24)
          );

          // 更新界面

          if (daysToDueDate > 0) {
            // 更新倒计时

            const dayCountElement = document.querySelector(
              "#pregnant-content .day-count"
            );

            if (dayCountElement) {
              dayCountElement.textContent = daysToDueDate;
            }

            // 更新预产期日期

            const dueDateElement = document.querySelector(
              "#pregnant-content .banner-title div div:last-child"
            );

            if (dueDateElement) {
              const formattedDueDate = `${dueDate.getFullYear()}年${
                dueDate.getMonth() + 1
              }月${dueDate.getDate()}日`;

              dueDateElement.textContent = formattedDueDate;
            }

            // 更新孕周信息

            const pregnancyWeekElement = document.querySelector(
              "#pregnant-content .flex.justify-between.text-sm span:first-child"
            );

            if (pregnancyWeekElement) {
              pregnancyWeekElement.textContent = `已孕${weeks}周+${days}天`;
            }

            // 更新进度条

            const progressBar = document.querySelector(
              "#pregnant-content .progress-bar"
            );

            if (progressBar) {
              // 假设孕期总共280天

              const progressPercentage = Math.min(
                100,
                Math.round((diffDays / 280) * 100)
              );

              progressBar.style.width = `${progressPercentage}%`;
            }
          }
        }

        // 更新产后状态相关信息
        else if (status === "postpartum" && userData.birthDate) {
          const birthDate = new Date(userData.birthDate);

          const today = new Date();

          // 计算宝宝月龄

          const diffTime = Math.abs(today - birthDate);

          const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

          const months = Math.floor(diffDays / 30);

          const days = diffDays % 30;

          // 更新界面

          const babyAgeElement = document.querySelector(
            "#postpartum-content .baby-age"
          );

          if (babyAgeElement) {
            babyAgeElement.textContent = `${months}个月${days}天`;
          }

          // 更新里程碑进度

          const milestoneBar = document.querySelector(
            "#postpartum-content .milestone-bar"
          );

          if (milestoneBar) {
            // 假设跟踪第一年的里程碑

            const progressPercentage = Math.min(
              100,
              Math.round((months / 12) * 100)
            );

            milestoneBar.style.width = `${progressPercentage}%`;
          }
        }
      }

      // 切换状态函数

      function switchStatus(status) {
        // 更新当前状态

        currentStatus = status;

        // 保存状态到本地存储

        localStorage.setItem("userStatus", status);

        // 更新状态指示器

        updateStatusIndicator(status);

        // 显示对应状态的内容

        showContent(status);
      }

      // 显示对应状态的内容

      function showContent(status) {
        // 隐藏所有状态内容

        document

          .querySelectorAll(
            ".preparing-content, .pregnant-content, .postpartum-content"
          )

          .forEach((content) => {
            content.style.display = "none";
          });

        // 显示当前状态内容

        const contentEl = document.getElementById(`${status}-content`);

        contentEl.style.display = "block";

        // 添加进入动画效果

        contentEl.classList.add("fade-enter");

        setTimeout(() => {
          contentEl.classList.add("fade-enter-active");
        }, 10);

        setTimeout(() => {
          contentEl.classList.remove("fade-enter", "fade-enter-active");
        }, 300);
      }

      // 底部导航栏点击事件

      document.querySelectorAll(".bottom-nav .nav-item").forEach((item) => {
        item.addEventListener("click", function () {
          document
            .querySelectorAll(".bottom-nav .nav-item")
            .forEach((navItem) => {
              navItem.classList.remove("active");
            });

          this.classList.add("active");

          const navText = this.querySelector("span").textContent;

          if (navText === "首页") {
            // 保持当前页面
          } else if (navText === "知识库") {
            window.location.href = "knowledge_list.html";
          } else if (navText === "我的") {
            window.location.href = "user_profile.html";
          }
        });
      });
    </script>
  </body>
</html>
